<!--
 * @Author: your name
 * @Date: 2021-11-26 11:31:25
 * @LastEditTime: 2021-11-26 17:12:12
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \brmsp\src\views\policy\SVG演示.html
-->
<!--
 * SVG演示
  元素	描述
  line	创建一条简单的线。
  rect	创建一个矩形。
  g 
  circle	创建一个圆形。
  ellipse	创建一个椭圆。
  polyline	定义由多个线定义构成的形状。
  polygon	创建一个多边形。
  path	支持任意路径的定义。
-->
<!DOCTYPE html>
<html>
<head></head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version='1.1' width="100%" height="1000px" >
    <!-- line 元素 创建一条水平线 -->
    <!-- <line x1='300' y1="100" x2='400' y2='100' style='stroke:red;stroke-width:10'/> -->
    <!-- rect 元素 创建矩形-->
    <!-- <rect x="300" y="300" width="300" height="100" style="fill:red"/> -->

    <!-- circle 元素  创建一个圆 -->
    <!-- <circle cx="300" cy="500" r="40" fill="red"/> -->

    <!-- ellipse 元素 椭圆 -->
    <!-- <ellipse cx="300" cy="600" rx="100" ry="50" style="fill:red;"/> -->
  
    <!-- polyline 元素 创建多直线楼梯-->
    <!-- <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4"/> -->
    <!-- 创建不规则的线 -->
    <!-- <polyline points="520,20 540,25 560,40 580,120 620,140 700,180" style="fill:white;stroke:red;stroke-width:3"/> -->
    <!-- 创建一个星形 -->
    <!-- <polygon points="100,210 40,380 190,260 10,260 160,380 100,210" style="fill:red;stroke:black;stroke-width:1"/> -->

    <!-- path 元素 创建任意图形 -->
    <!-- <path d="M1000,200 h-150 a150,150 0 1,0 150,-150 z" fill="red" stroke="blue" stroke-width="5"/> -->
    <!-- 当命令为大写时，应用绝对位置。当它为小写时，应用相对位置。 -->
    <path d="M975,575 v-150 a150,150 0 0,0 -150,150 z" fill="yellow" stroke="blue" stroke-width="5"/>
    <!-- 	
      (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

      rx ry 是椭圆的两个半轴的长度。

      x-axis-rotation 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。

      large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。

      sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。

      x y 是圆弧终点的坐标。
    -->
    <path d="M600,900 l 50,-25
          a25,25 -30 0,1 50,-25 l 50,-25
          a25,50 -30 1,0 50,-25 l 50,-25
          a25,75 -30 0,0 50,-25 l 50,-25
          a25,100 0 1,1 50,-25 l 50,-25"
          fill="none" stroke="red" stroke-width="5"/> 
  </svg>
</body>
</html>